<template>
  <div>
    <!-- v-if , 作用是决定一个元素是否渲染 ， 是否出现在真实dom结构中
        当v-if的值是false，会直接从dom结构中删除
    -->
    <div v-if="bool">v-if</div>
    <!-- v-show , 作用是决定一个元素是否显示 ， display: none | block;-->
    <div v-show="show">v-show</div>
    <!-- 
        什么时候使用v-if  - 由于是会频繁地操作dom的新增和删除，效率比较低，所以如果仅仅是用于让用户看不见，就使用v-show就行
        什么时候使用v-show - 使用的display的属性，不会进行删除和新增，如果需要频繁地切换，主要使用v-show
     -->
    <!-- v-if是可以结合v-else 等等进行使用的 -->
    <!-- 即使不使用v-else也是可以使用下面的写法达到互斥显示的效果 -->
    <div v-if="a"></div>
    <div v-if="!a"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      bool: false,
    };
  },
};
</script>
